<!--
 * ============LICENSE_START=======================================================
 * SDC
 * ================================================================================
 * Copyright (C) 2020 Nordix Foundation. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
-->

<div class="substitution-filter">
  <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
  <div class="w-sdc-designer-sidebar-section">
    <sdc-accordion [title]="'Substitution Filter Properties'" [arrow-direction]="'right'" [open]="true">
      <div class="i-sdc-designer-sidebar-section-content-substitution-filter-section">

        <div class="i-sdc-designer-sidebar-section-content-substitution-filter"
             [ngClass]="{'hand': !readonly}"
             *ngFor="let property of constraintProperties; let i = index">
          <div class="rule-details" [ngClass]="{'readonly': readonly}">
            <div class="rule-desc" (click)="!readonly && onSelectSubstitutionFilter(PROPERTIES, i)"
                 tooltips
                 tooltip="{{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator) + ' '
             + (property.sourceName ? property.sourceName + ':' : '') + property.value}}">
              {{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator)
            + ' '
            + (property.sourceName ? property.sourceName + ':' : '') + property.value}}
            </div>
            <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
                  (click)="openDeleteModal(PROPERTIES, i)"
                  data-tests-id="delete-input-button"></span>
          </div>
        </div>

        <div class="w-sdc-designer-sidebar-section-substitution-filter-footer">
          <button
                  class="w-sdc-designer-sidebar-section-substitution-filter-footer-action add-rule-btn tlv-btn blue"
                  data-tests-id="add-rule-button"
                  (click)="onAddSubstitutionFilter(PROPERTIES)"
                  [disabled]="readonly">
            {{'ADD_SUBSTITUTION_FILTER' | translate}}
          </button>
        </div>
      </div>
    </sdc-accordion>
  </div>
</div>
